<template>
  <view>
    <!--  view.goods-box>(view.goods-head>(text+u-tag[text="标签"]))+view.goods-info>(u-steps>u-steps-item*2+view.goods-dz>view*2)+view.goods-footer>(view>view*2)+u-button{提货} -->
    <view class="goods-box">
      <view class="goods-head">
        <text>任务编号:{{item.transportTaskId}}</text>
        
        <u-tag v-if="item.isDelay" text="以延迟" shape="circle" color="#EF4F3F" borderColor="#EF4F3F" bgColor="#fff" size="mini"></u-tag>
      </view>
      <view class="goods-info">
        <u-steps current="1" direction="column" class="steps">
          <u-steps-item :title="item.startAddress">
            <text class="slot-start" slot="icon">起</text>
          </u-steps-item>
          <u-steps-item :title="item.endAddress">
            <text class="slot-end" slot="icon">止</text>
          </u-steps-item>
          <view class="goods-dz">
            <view></view>
            <view></view>
          </view>
        </u-steps>
      </view>
      <view class="goods-footer">
        <view class="goods_time">
          <view class="title">提货时间</view>
          <view>{{item.planArrivalTime}}</view>
        </view>
        <u-button type="error" shape="circle" color="#EF4F3F" style="width: 80px;">提货</u-button>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: '',
    components: {},
    props:{
      item:{
        type:Object,
        undefined:{}
      }
    },
    data() {
      return {

      };
    },
    created() {},
    mounted() {},
    onLoad() {},
    methods: {}
   
  }
</script>

<style lang="scss">
  ::v-deep .u-text__value--content,
  ::v-deep .u-text__value--main {
    color: #818181;
  }

  ::v-deep .u-steps-item__line--column {
    background-color: transparent !important;
    border: 1px dashed #d9d9d9;
    width: 0px;
  }

  .slot-start,
  .slot-end {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 12px;
    color: #FFFFFF;
  }

  .slot-start {
    background-color: #2A2929;
  }

  .slot-end {
    background-color: #EF4F3F;
  }

  .goods-box {
    box-sizing: border-box;
    // width: 690rpx;
    // height: 488rpx;
    background-color: #FFFFFF;
    border-radius: 20rpx;
    padding: 30rpx 40rpx 0 40rpx;
    margin-bottom: 10px;
    .goods-head {
      display: flex;

      text {
        flex: 1;
        font-weight: 700;
      }
    }

    .goods-info {
      padding: 42rpx 0;
      border-bottom: 1px solid #EEEEEE;
    }
    .goods-footer{
        padding:40rpx 0;
        display: flex;
        .goods_time{
              flex: 1;
              .title{
                color:#818181;
              }
        }
    }
    
  }
</style>